<template>
    <div class="video-compare-container">
        <div class="video-wrapper">
            <h3>原始视频</h3>
            <video-player class="video-player vjs-custom-skin" ref="originalPlayer" :playsinline="true"
                :options="originalOptions" @timeupdate="syncVideos('original')">
            </video-player>
        </div>

        <div class="video-wrapper">
            <h3>处理结果</h3>
            <video-player class="video-player vjs-custom-skin" ref="processedPlayer" :options="processedOptions"
                @timeupdate="syncVideos('processed')" />
        </div>

        <div class="control-bar">
            <el-button @click="playBoth">同时播放</el-button>
            <el-button @click="pauseBoth">同时暂停</el-button>
        </div>
    </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'


export default {
    components: { videoPlayer },
    props: {
        originalSrc: String,
        processedSrc: String
    },
    data() {
        return {
            originalOptions: {
                autoplay: false,
                controls: true,
                sources: [{
                    src: this.originalSrc,
                    type: 'video/mp4'
                }]
            },
            processedOptions: {
                autoplay: false,
                controls: true,
                sources: [{
                    src: this.processedSrc,
                    type: 'video/mp4'
                }],
                html5: {
                    vhs: {
                        overrideNative: true,
                        enableLowInitialPlaylist: true,
                        experimentalBufferBasedABR: true
                    },
                    nativeVideoTracks: false,
                    nativeAudioTracks: false,
                    nativeTextTracks: false
                }
            },
            isSyncing: false
        }
    },
    methods: {
        // syncVideos(source) {
        //     // 防止循环触发
        //     if (this.isSyncing) return

        //     this.isSyncing = true

        //     const originalPlayer = this.$refs.originalPlayer.player
        //     const processedPlayer = this.$refs.processedPlayer.player

        //     // 根据触发源同步另一个播放器
        //     if (source === 'original') {
        //         processedPlayer.currentTime(originalPlayer.currentTime())
        //     } else {
        //         originalPlayer.currentTime(processedPlayer.currentTime())
        //     }

        //     // 防抖处理
        //     setTimeout(() => {
        //         this.isSyncing = false
        //     }, 100)
        // },

        playBoth() {
            this.$refs.originalPlayer.player.play()
            this.$refs.processedPlayer.player.play()
        },

        pauseBoth() {
            this.$refs.originalPlayer.player.pause()
            this.$refs.processedPlayer.player.pause()
        }
    }
}
</script>

<style scoped>
.video-compare-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    height: auto;
    max-width: 1600px;
    margin: 0 auto;
}

.video-wrapper {
    position: relative;
    background: #000;
    padding: 10px;
    border-radius: 8px;
}

.video-wrapper h3 {
    color: white;
    margin-bottom: 10px;
}

.control-bar {
    grid-column: 1 / -1;
    margin-top: 20px;
    text-align: center;
}
</style>